<template>
    <div>
        <a-button type="primary" @click="openDialog">增加</a-button>
        <a-modal v-model="visible" title="增加学生" v-bind="layout" @ok="handleOk">
            <a-form-model ref="addForm" :model="addForm" :rules="rules" v-bind="layout">
                <a-form-model-item has-feedback label="姓名" prop="name">
                    <a-input v-model="addForm.name" />
                </a-form-model-item>
                <a-form-model-item has-feedback label="年龄" prop="age">
                    <a-input v-model="addForm.age" />
                </a-form-model-item>
                <a-form-model-item has-feedback label="性别" prop="gender">
                    <a-radio-group  v-model="addForm.gender" name="addGender" >
                        <a-radio value="男"> 男 </a-radio>
                        <a-radio value="女"> 女 </a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="选择班级" >
                     <a-select  style="width: 120px" v-model="addForm.classId">
                        <a-select-option :value="cls._id" v-for="cls in classes" :key="cls._id">
                            {{cls.name}}
                        </a-select-option>
                     </a-select>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
import {add} from '../../services/student'
import {getAll} from '../../services/classes'
export default {
    data(){
        return {
            classes:[],
            visible:false,
            addForm:{

            },
            rules:{
                name:[
                    {required:true,message:"姓名不能位空"}
                ]
            },
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 16 },
            },
        }
    },
    methods:{
        async handleOk(){
            await add(this.addForm);
            this.visible = false;
            this.$emit("show");
            // this.$refs['addForm'].validate((valid,obj) => {

            // console.log(valid,obj);
            // })
        },
        async openDialog(){
            this.classes = await getAll();
            this.visible = true;
            
        }
    
    }
};
</script>

<style>
</style>